<template>
<div class="home page">
  <!--搜索--START-->
  <div class="search-form border p-20-20-0-20 card-shadow">
    <auto-form :setting="searchFormSetting" :form="searchFormGroup" :button="searchFormButton" :default-form="searchForm" @search="handleClickSearchFormSearch" @export="handleClickSearchFormExport"/>
  </div>
  <!--搜索--END-->

  <!--列表--START-->
  <div class="list-table border p-20 m-20-0-0-0 card-shadow p-20-20-0-20">
    <auto-table is-checked :title="tableTitle" :data="mockTableData" :event="tableButton" @checkRow="handleTableCheckRow" @edit="handleClickTableEdit" @delete="handleClickTableDelete"/>
    <!--分页-->
    <paging :total="pageTotal" :page="currentPage" :size="pageSize" @page="handleClickPage" @size="handleClickSize"/>
  </div>
  <!--列表--END-->

  <!--弹出层--START-->
  <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="30%">
    <auto-form v-if="dialogVisible" :setting="dialogFormSetting" :form="dialogFormGroup" :button="dialogFormButton" :default-form="dialogForm" @confirm="handleClickDialogFormConfirm"/>
  </el-dialog>
  <!--弹出层--END-->
</div>
</template>

<script>
import autoForm from '@/views/home/components/autoForm/index.vue'
import autoTable from '@/views/home/components/autoTable/index.vue'
import autoTableMixins from '@/views/home/components/autoTable/mixins.js'
import paging from '@/views/home/components/paging/index.vue'
import { searchFormSetting, searchFormGroup, searchFormButton, tableTitle, tableButton, dialogFormSetting, dialogFormGroup, dialogFormButton } from '@/views/home/index'
import { exportExcel } from '@/utils/excel/ExportExcel'
const mockTableData = [
  { RQ: '2023-11-11', DD: 1, ZC: '白米粥', KH: '不可说', JY: '不可说', GZ: '一直干', WC: '小米饭', WX: '不休息', XB: '不下班' },
  { RQ: '2023-12-12', DD: 2, ZC: '黑米粥', KH: '不可说', JY: '不可说', GZ: '一直干', WC: '小米饭', WX: '不休息', XB: '不下班' },
  { RQ: '2023-13-14', DD: 3, ZC: '小米粥', KH: '不可说', JY: '不可说', GZ: '一直干', WC: '小米饭', WX: '不休息', XB: '不下班' },
  { RQ: '2023-14-14', DD: 4, ZC: '玉米粥', KH: '不可说', JY: '不可说', GZ: '一直干', WC: '小米饭', WX: '不休息', XB: '不下班' },
  { RQ: '2023-15-16', DD: 0, ZC: '南瓜粥', KH: '不可说', JY: '不可说', GZ: '一直干', WC: '小米饭', WX: '不休息', XB: '不下班' }
]
export default {
  name: 'index',
  title: '拉风的首页',
  components: { autoForm, autoTable, paging },
  mixins: [autoTableMixins],
  data () {
    return {
      // 搜索表单部分
      searchFormSetting,
      searchFormGroup,
      searchFormButton,
      searchForm: {},
      // 主体表格部分
      tableTitle,
      tableButton,
      mockTableData,
      // 弹出层
      dialogTitle: '弹出层标题',
      dialogVisible: false,
      dialogFormSetting,
      dialogFormGroup,
      dialogFormButton,
      dialogForm: {},
      // 分页
      pageTotal: mockTableData.length,
      currentPage: 1,
      pageSize: 10
    }
  },
  methods: {
    // 当前页
    handleClickPage (count) {
      this.currentPage = count
    },
    // 每页条数
    handleClickSize (count) {
      this.pageSize = count
    },
    // 点击搜索表单搜索
    handleClickSearchFormSearch (form) {
      console.log(form)
    },
    // 点击搜索表单重置【默认在子组件中处理过】
    // 点击搜索表单下载按钮【纯前端下载】
    handleClickSearchFormExport () {
      if (this.checkRow) {
        // 获取表格表头文字和属性
        const tableHeader = tableTitle.map(i => i.label)
        const tableProps = tableTitle.map(i => i.prop)
        // 勾选的的数据
        const checkedData = this.checkRow
        // 取出勾选数据的value
        const tableData = checkedData.map(v => tableProps.map(j => v[j]))
        // 执行下载
        exportExcel(tableHeader, tableData, 'autoTable')
        // 清空勾选的数据
        this.checkRow = null
        // 去掉勾勾
        this.node.clearSelection()
      } else {
        this.$message({
          type: 'warning',
          message: '至少勾选一列'
        })
      }
    },
    // 列表勾选列【通用事件已经引入autoTableMixins, 页面直接使用this.checkRow】
    // 处理表格列编辑
    handleClickTableEdit (index, row) {
      this.dialogTitle = '编辑面板'
      this.dialogVisible = true
      this.dialogForm = row
    },
    // 处理表格列删除
    handleClickTableDelete (index, row) {},
    // 处理弹出层表单保存
    handleClickDialogFormConfirm (form) {
      console.log(form)
    }
  }
}
</script>

<style scoped lang="scss">

</style>
